import { FC, useEffect, useRef, useState } from "react"
import Taro, { useRouter } from '@tarojs/taro'
import check from '../../resource/checked.png'
import uncheck from '../../resource/uncheck.png'
import prohibit from '../../resource/prohibit.png'
import style from './style.less'

const Payment: FC = () => {
  const router = useRouter()
  const cargoId = router.params.cargoId

  const [select, setSelect] = useState(3)
  const [subSelect, setSubSelect] = useState(1)
  const isMembership = useRef(Taro.getStorageSync('vip'))
  console.log(isMembership.current);


  const [cargoOrderDTO, setCargoOrderDTO] = useState<any>({})
  const [coupons, setCoupons] = useState<any[]>([])
  const [freeTimes, setFreeTimes] = useState(0)

  useEffect(() => {
    Taro.request({
      url: 'http://139.9.123.88:8083/fta-trade/order/driver/prePayDeposit',
      method: 'POST',
      data: JSON.stringify({
        cargoId: cargoId,
        openId: Taro.getStorageSync('token')
        // openId: 'o4ZIg47fUX_fpbvoq6uCsTIyBldQ'
      }),
      success: (data) => {
        console.log('支付订金页面', data);
        setCargoOrderDTO(data.data.data.cargoOrderDTO)
        setCoupons(data.data.data.coupons)
        setFreeTimes(data.data.data.freeTimes)
      },
      fail: () => {
        console.log('进入支付订金页查询失败');
      }
    })
  }, [])

  const getNetFreight = () => {
    if (cargoOrderDTO.needReturnDeposit) {
      if (select === 3) {
        return cargoOrderDTO.cargoFee - cargoOrderDTO.estimateDistance
      }
      if (select === 2) {
        if (subSelect === 1) {
          if (cargoOrderDTO.estimateDistance >= coupons[0]?.couponAmount) {
            return cargoOrderDTO.cargoFee - cargoOrderDTO.estimateDistance + coupons[0]?.couponAmount
          } else {
            return cargoOrderDTO.cargoFee
          }
        }
        if (subSelect === 2) {
          if (cargoOrderDTO.estimateDistance >= coupons[1]?.couponAmount) {
            return cargoOrderDTO.cargoFee - cargoOrderDTO.estimateDistance + coupons[1]?.couponAmount
          } else {
            return cargoOrderDTO.cargoFee
          }
        }
        if (subSelect === 3) {
          if (cargoOrderDTO.estimateDistance >= coupons[2]?.couponAmount) {
            return cargoOrderDTO.cargoFee - cargoOrderDTO.estimateDistance + coupons[2]?.couponAmount
          } else {
            return cargoOrderDTO.cargoFee
          }
        }
      }
      if (select === 1) {
        return cargoOrderDTO.cargoFee
      }
    } else {
      if (select === 3) {
        return cargoOrderDTO.cargoFee - cargoOrderDTO.deposit - cargoOrderDTO.estimateDistance
      }
      if (select === 2) {
        if (subSelect === 1) {
          if (cargoOrderDTO.estimateDistance >= coupons[0]?.couponAmount) {
            return cargoOrderDTO.cargoFee - cargoOrderDTO.deposit - cargoOrderDTO.estimateDistance + coupons[0]?.couponAmount
          } else {
            return cargoOrderDTO.cargoFee - cargoOrderDTO.deposit
          }
        }
        if (subSelect === 2) {
          if (cargoOrderDTO.estimateDistance >= coupons[1]?.couponAmount) {
            return cargoOrderDTO.cargoFee - cargoOrderDTO.deposit - cargoOrderDTO.estimateDistance + coupons[1]?.couponAmount
          } else {
            return cargoOrderDTO.cargoFee - cargoOrderDTO.deposit
          }
        }
        if (subSelect === 3) {
          if (cargoOrderDTO.estimateDistance >= coupons[2]?.couponAmount) {
            return cargoOrderDTO.cargoFee - cargoOrderDTO.deposit - cargoOrderDTO.estimateDistance + coupons[2]?.couponAmount
          } else {
            return cargoOrderDTO.cargoFee - cargoOrderDTO.deposit
          }
        }
      }
      if (select === 1) {
        return cargoOrderDTO.cargoFee - cargoOrderDTO.deposit
      }
    }
  }

  const getCalcMethods = () => {
    if (cargoOrderDTO.needReturnDeposit) {
      if (select === 3) {
        return <div className="computed">净得运费 = 总运费 - 技术服务费</div>
      }
      if (select === 2) {
        if (subSelect === 1) {
          if (cargoOrderDTO.estimateDistance >= coupons[0]?.couponAmount) {
            return <div className="computed">净得运费 = 总运费 - 技术服务费 + 货运券</div>
          } else {
            return <div className="computed">净得运费 = 总运费</div>
          }
        }
        if (subSelect === 2) {
          if (cargoOrderDTO.estimateDistance >= coupons[1]?.couponAmount) {
            return <div className="computed">净得运费 = 总运费 - 技术服务费 + 货运券</div>
          } else {
            return <div className="computed">净得运费 = 总运费</div>
          }
        }
        if (subSelect === 3) {
          if (cargoOrderDTO.estimateDistance >= coupons[2]?.couponAmount) {
            return <div className="computed">净得运费 = 总运费 - 技术服务费 + 货运券</div>
          } else {
            return <div className="computed">净得运费 = 总运费</div>
          }
        }
      }
      if (select === 1) {
        return <div className="computed">净得运费 = 总运费</div>
      }
    } else {
      if (select === 3) {
        return <div className="computed">净得运费 = 总运费 - 订金 - 技术服务费</div>
      }
      if (select === 2) {
        if (subSelect === 1) {
          if (cargoOrderDTO.estimateDistance >= coupons[0]?.couponAmount) {
            return <div className="computed">净得运费 = 总运费 - 订金 - 技术服务费 + 货运券</div>
          } else {
            return <div className="computed">净得运费 = 总运费 - 订金</div>
          }
        }
        if (subSelect === 2) {
          if (cargoOrderDTO.estimateDistance >= coupons[1]?.couponAmount) {
            return <div className="computed">净得运费 = 总运费 - 订金 - 技术服务费 + 货运券</div>
          } else {
            return <div className="computed">净得运费 = 总运费 - 订金</div>
          }
        }
        if (subSelect === 3) {
          if (cargoOrderDTO.estimateDistance >= coupons[2]?.couponAmount) {
            return <div className="computed">净得运费 = 总运费 - 订金 - 技术服务费 + 货运券</div>
          } else {
            return <div className="computed">净得运费 = 总运费 - 订金</div>
          }
        }
      }
      if (select === 1) {
        return <div className="computed">净得运费 = 总运费 - 订金</div>
      }
    }
  }

  const pay = (amount, type) => {
    if (select === 2) {
      Taro.navigateTo({ url: `/packageC/cashier/index?amount=${amount}&cargoId=${cargoId}&type=${type}&couponId=${coupons[subSelect - 1]?.couponId}&preferenceType=${select}&payAmount=${cargoOrderDTO.deposit}` })
    } else {
      Taro.navigateTo({ url: `/packageC/cashier/index?amount=${amount}&cargoId=${cargoId}&type=${type}&couponId=''&preferenceType=${select}&payAmount=${cargoOrderDTO.deposit}` })
    }

  }

  return (
    <div className={style.root}>
      <div className="amount">
        <div className="refound">
          <div>订金</div>
          {cargoOrderDTO.needReturnDeposit ? <div>退还</div> : <div>不退还</div>}
        </div>
        <div className="deposit">¥ {cargoOrderDTO.deposit}.00</div>
        <div className="tips">订金将由平台监管，卸货完成后{cargoOrderDTO.needReturnDeposit ? '返还给您' : '支付给货主'}</div>
        <div className="cargoFee">
          <div>总运费</div>
          <div>¥ {cargoOrderDTO.cargoFee}.00</div>
        </div>
      </div>
      <div className="discount">
        <div className="service">
          <div>技术服务费</div>
          <div>¥ {cargoOrderDTO.estimateDistance}.00</div>
        </div>
        <div className="radio" onClick={() => {
          if (isMembership && freeTimes > 0) {
            setSelect(1)
          }
        }}>
          <img src={isMembership && freeTimes > 0 ? select === 1 ? check : uncheck : prohibit} alt="" />
          <div>免技术服务费优惠</div>
          <div>剩余免费次数：{freeTimes}</div>
        </div>
        <div className="radio" onClick={() => {
          if (coupons.length > 0) {
            setSelect(2)
          }
        }}>
          <img src={coupons.length > 0 ? select === 2 ? check : uncheck : prohibit} alt="" />
          <div>货运券</div>
          <div style={{ display: coupons.length > 0 ? 'none' : 'block' }}>暂无货运券</div>
        </div>
        <div className="coupons" style={{ display: select === 2 ? 'block' : 'none' }}>
          {
            coupons.map((item, index) => {
              return (
                <div className="inner-radio" onClick={() => { setSubSelect(index + 1) }}>
                  <img src={subSelect === index + 1 ? check : uncheck} alt="" />
                  <div>{item?.couponAmount}元 货运券</div>
                  <div>到期时间：{item?.endTimeFormat}</div>
                </div>
              )
            })
          }
        </div>
        <div className="radio" onClick={() => { setSelect(3) }}>
          <img src={select === 3 ? check : uncheck} alt="" />
          <div>不使用优惠</div>
        </div>
      </div>
      <div className="final">
        <div className="final-earn">
          <div>净得运费</div>
          <div>¥ {getNetFreight()}.00</div>
        </div>
        {getCalcMethods()}
      </div>
      <div className="pay" onClick={() => { pay(getNetFreight(), 101) }}>支付订金 {cargoOrderDTO.deposit}.00元</div>
    </div>
  )
}

export default Payment